<template>
  <transition name="move">
    <div v-if="show" class="mail-verify gap-row-8 d-flex justify-center align-center">
      <Icon size="20" name="bell"></Icon>
      <i18n-t keypath="info.reminderVerification" tag="div" class="font-size-14 font-weight-500 line-height-120">
        <template #mailVerify
          ><span @click="toVerifyMail" class="text-primary pointer">{{ $t('title.mailVerify') }}</span></template
        >
      </i18n-t>
      <Icon size="20" name="noWhite" class="pointer" @click="showVerifyPrompt"></Icon>
    </div>
  </transition>
</template>
<script setup>
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useLocalStorage } from '@vueuse/core'
import { storeToRefs } from 'pinia'
import { useAccountStore } from '@/store/account'
import { LOCAL_STORAGE_KEYS } from '@/constant'

const { isLogin, userData } = storeToRefs(useAccountStore())

const mailVerifyStatus = computed(() => {
  return userData.value ? userData.value?.is_bind_email : false
})

const tempCloseStatus = useLocalStorage(LOCAL_STORAGE_KEYS.TEMP_CLOSE_STATUS, false)
const endTime = useLocalStorage(LOCAL_STORAGE_KEYS.CLOSE_VERIFY_TIME, 0)

const show = computed(() => {
  if (mailVerifyStatus.value === undefined) {
    return false // 一開始先設為 false
  }

  const currentPath = ref(router.currentRoute.value.fullPath)
  if (
    currentPath.value.includes('mine') ||
    currentPath.value.includes('thank-you') ||
    currentPath.value.includes('promote-creator')
  ) {
    return false
  }

  return isLogin.value && !mailVerifyStatus.value && !tempCloseStatus.value
})

const updateStatus = () => {
  const currentTime = Date.now()
  if (currentTime < endTime.value) {
    tempCloseStatus.value = true
  } else {
    tempCloseStatus.value = false
  }
}

function showVerifyPrompt() {
  tempCloseStatus.value = true
  endTime.value = Date.now() + 12 * 60 * 60 * 1000 // 12小時
}

updateStatus()

// 尚未驗證的用戶至驗證信箱頁
const router = useRouter()
const toVerifyMail = () => {
  router.push({ path: `mine/settings/mail-verify` })
}
</script>
<style scoped lang="scss">
.mail-verify {
  width: 100%;
  height: 3.25rem;
  margin: 0;
  padding: 1rem 1.5rem;
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  background: rgba(24, 25, 37, 0.02);
  backdrop-filter: blur(9px);
}
.move-enter-active,
.move-leave-active {
  transition: transform 0.5s ease;
}
.move-enter-from,
.move-leave-to {
  transform: translateY(-100%);
}
</style>
